<template>
	<div>
		<audio id="chatfAudio" ref="chatfAudios" autoplay @ended="chatfAudioendfun()" v-if="audioac">
			<source :src="apifun.URLimg + audioac">
		</audio>
		<div class="chbatjl" ref="recordscroll" @scroll="recordscrollfun" >
			<div class="recordt">
				<div class="recordtnav flex">
					<div class="recordtnaveacch curpoin" :class="navac == 0 ? 'mainColor':''" @click="tagfun(0)">全部</div>
					<div class="recordtnaveacch curpoin" :class="navac == 1 ? 'mainColor':''" @click="tagfun(1)">文本</div>
					<div class="recordtnaveacch curpoin" :class="navac == 2 ? 'mainColor':''" @click="tagfun(2)">图片</div>
					<div class="recordtnaveacch curpoin" :class="navac == 3 ? 'mainColor':''" @click="tagfun(3)">文件</div>
				</div>
				<div class="recordtsearch marginAuto" style="display: flex;">
					<el-input class="infosearch-input" @change="searchtxtfun()" v-model="keywords"
						prefix-icon="el-icon-search" placeholder="搜索"></el-input>
					<el-button class="mainbg" style="color:#fff;" @click="searchtxtfun()">刷新</el-button>
				</div>
			</div>
			<div class="recordmain" @click="collectemophotodelitem={}">
				<div class="loadingicon" v-if="tlicon" style="height:20px;text-align:center;"><span class="el-icon-loading" style="font-size:22px;"></span></div>
				<div class="recordmaineach" v-for="(item,index) in recorddata" :key="index">
					<div class="recordmsgtime mainColor" v-if="item.from_user.user_id == userInfo.user_id">
						<span>{{ userInfo.realname }}</span>
						<span>{{ item.sendTime | sendTimeYMdhis }}</span>
					</div>
					<div class="recordmsgtime" v-if="item.from_user.user_id != userInfo.user_id">
						<span v-if="item.type != 'system'">{{ item.from_user.realname }}</span>
						<span v-if="item.type == 'system'">系统消息</span>
						<span>{{ item.sendTime | sendTimeYMdhis }}</span>
					</div>
					<div class="recordmsgmain">
						<div class="recordmsgmaintxt" v-if="item.type == 'system'" v-html="item.content"></div>
						<div class="recordmsgmaintxt" v-if="item.type == 'text'" v-html="item.content"></div>
						<div class="recordmsgmaindown flex" v-if="item.type == 'file'" @click="downloadfun(item.content,item.fileName)">
							<div class="downfileicon">
								<img class="" src="@/assets/fun/fileicon.png" alt="" />
							</div>
							<div class="downfilemsg">
								<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
								<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
							</div>
							<div class="downicon">
								<span class="el-icon-download"></span>
							</div>
						</div>
						<div class="chbatmsgsj-Audio flex curpoin" 
							@click="audiobf(item,index)"
							v-if="item.type == 'voice'">
							<span class="chbatmsgsj-Audioicon">
								<img class="chbatmsgsj-Audioiconimg" v-if="audioac != item.content"
									src="@/assets/chat/audioicon.png" alt="未播放" />
								<img class="chbatmsgsj-Audioiconimg" v-if="audioac == item.content"
									src="@/assets/chat/audioiconac.png" alt="播放中" />
							</span>
							<span class="chbatmsgsj-Audiotxt" :class="audioac == item.content ? 'mainColor':''">{{ item.extends.duration }}</span>
						</div>
						<div class="recordmsgmainimg" v-if="item.type == 'image'">
							<img :src="apifun.URLimg + item.content" alt="图" />
						</div>
						<div class="recordmsgmainimg" v-if="item.type == 'emoticon'" @contextmenu.prevent="openContextcollectemo($event,item)">
							<img :src="apifun.URLimg + item.content" alt="图" />
							<div class="emoVisible" v-if="collectemophotodelitem.file_id"
							:style="{
								'left':emox+10+'px',
								'top':emoy+10+'px'
							}">
								<li class="emoVisibleeach curpoin" @click="collectbremofun()">收藏</li>
							</div>
						</div>
						<div class="recordmsgmaindown flex curpoin" v-if="item.type == 'video'" @click="playvideois=true,playvideourl=item.content">
							<div class="downfileicon">
								<img :src="item.extUrl" alt="视频" />
							</div>
							<div class="downfilemsg">
								<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
								<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
							</div>
							<div class="downicon">
								<span class="el-icon-video-play"></span>
							</div>
						</div>
						<div class="recordmsgmaintxt" v-if="item.type == 'webrtc'">{{ item.content }}</div>
					</div>
				</div>
				<div class="loadingicon" v-if="isloadingicon" style="height:20px;text-align:center;"><span
						class="el-icon-loading" style="font-size:22px;"></span></div>
			</div>
			
		</div>
		<!-- 播放视频 -->
		<el-dialog  
			id="playvideo"
		  title="播放视频"
		  :visible.sync="playvideois"
		  width="490px"
		  top="80px"
		  :before-close="diaClosefun"
		  :modal-append-to-body="false">
		   <div class="videoclass">
			   <video width="450" height="400" controls :src="apifun.URLimg + playvideourl"></video>
		   </div>
		</el-dialog>
	</div>
</template>

<script>
	import utils from '@/utils/utils';
	import { getFileSize, getFileExtImg,download } from "@/utils/file";
	export default {
		props: ['toContactId','orderid','fromUid','orderdatamsg'],
		data() {
			return {
				page: 1,
				limit:20,
				userInfo:this.$store.state.UserInfo,
				navac: 0,
				navactxt:'all',
				keywords: '',
				audioac: '',
				directional:1,
				recdatais:false,
				recorddata: [],
				tlicon:false,
				playvideois:false,
				playvideourl:'',
				
				collectemophotodelitem:{},
				emox:0,
				emoy:0,
				isshake:true,
				isloadingicon: false,
			}
		},
		methods: {
			searchfun() {
				let sendData = {
					chat_sign:this.orderdatamsg.chat_sign,
					toContactId: this.toContactId,
					is_group:0,
					type: this.navactxt,
					is_at: 0,
					search: this.keywords,
					down_page: this.page,
					limit: this.limit,
					last_id: '', // 某一条数据ID
					directional: 1, // 0下拉加载以前的消息 1上拉加载以后的消息
					fromUid:this.fromUid || '',
					order_id:this.orderid || 0,
					msg_id:'',
					is_first:1,
					directional:1,
					is_read: 0    // 第三者看别人的所有聊天记录
				};
				this.isloadingicon = true;
				this.apifun.$post('/pc/im/getMessageRecord',sendData).then((res)=>{
					// console.log(res)
					this.isloadingicon = false;
					this.isshake = true;
					if(res.code ==  200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							this.isshake = false;
							return false
						}
						this.recorddata = [...this.recorddata,...datas.data];
					}
				})
			},
			searchtxtfun() {
				this.page = 1;
				this.recorddata = [];
				this.searchfun()
			},
			tagfun(type){
				this.navac = type;
				let types = type || 0;
				let navactxt = 'all';
				if(types == 0){
					navactxt = 'all';
				}else if (types == 1) {
					navactxt = 'text';
				} else if (types == 2) {
					navactxt = 'image';
				} else if (types == 3) {
					navactxt = 'file';
				};
				this.navactxt = navactxt;
				this.page = 1;
				this.recorddata = [];
				this.searchfun();
			},
			recordscrollfun(event){   // istyp最后一页停掉
				const {
					scrollTop,
					scrollHeight,
					clientHeight
				} = event.target;
				if (this.isloadingicon) return;
				if (scrollTop + clientHeight >= scrollHeight) { // 留10px加载
					if (this.isshake) {
						this.isshake = false;
						this.page++;
						this.searchfun();
					}
				}
			},
			audiobf(item,index){  // 播放语音
				if(this.audioac != ''){
					this.audioac='';
					this.$refs.chatfAudios.pause();
					return false
				}
				this.audioac = item.content;
				// this.$refs.chatfAudios.play();
			},
			chatfAudioendfun(){
				this.audioac = '';
				this.$refs.chatfAudios.pause();
			},
			openContextcollectemo(event,item){  // 收藏表情
				this.collectemophotodelitem = item;
				this.emox = event.clientX;
				this.emoy = event.clientY;
			},
			collectbremofun(){  // 收藏表情
				let sendData = {
					file:this.collectemophotodelitem.content,
					file_id:this.collectemophotodelitem.file_id,
				};
				this.apifun.$post('/pc/upload/collectImg',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '收藏成功',
							type: 'success'
						});
					}
				})
			},
			downloadfun(src,name){
				download(src,name)
			},
			diaClosefun(){
				this.playvideois = false
			}
		},
		mounted() {
			// this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			this.searchfun()
		},
		filters: {
			sendTimeYMdhis(value){
				return utils.date('y/m/d H:i:s',value);
			},
			getFileSize(value){
				return utils.getFileSize(value)
			},
		},
	}
</script>

<style scoped lang="scss">
	.chbatjl {
		width: 270px;
		height: 91vh;
		overflow-y: auto;
		border-bottom-right-radius: 10px;
		background-color: var(--bgColor);
	}
	.chbatjl::-webkit-scrollbar {
	  width: 10px; /* 设置纵向滚动条宽度 */
	  height:15px;
	}
	.recordt {
		position: sticky;
		top: 0;
		z-index: 50;
		background-color: var(--bgColor);

		.recordtnav {
			width: 90%;
			padding: 0 5%;
			margin-bottom: 10px;
			justify-content: space-between;

			.recordtnaveacch {
				line-height: 40px;
				color: #333333;
				font-size: 14px;
				font-weight: bold;
			}
		}

		.recordtsearch {
			width: 90%;
		}
	}

	.recordmain {
		margin-top: 20px;

		.recordmaineach {
			width: 90%;
			margin: 10px auto;

			.recordmsgtime {
				color: #999999;
				font-size: 12px;
				line-height: 30px;
			}

			.recordmsgmain {
				.recordmsgmaintxt {
					font-size: 14px;
					color: #666666;
					line-height: 20px;
				}

				.recordmsgmaindown {
					width: 80%;
					padding: 9px;
					border: 1px solid var(--mainColor);
					border-radius: 10px;
					justify-content: space-between;

					.downfileicon {
						width: 34px;
						height: 34px;
						margin-top: 2px;

						img {
							width: 34px;
							height: 34px;
						}
					}

					.downfilemsg {
						width: 62%;

						.downfilemsgname {
							color: #777777;
							font-size: 14px;
							line-height: 20px;
						}

						.downfilemsg-rl {
							color: #777777;
							font-size: 10px;
							line-height: 20px;
						}
					}

					.downicon {
						font-size: 18px;
						line-height: 40px;
						color: #999999;
					}
				}

				.chbatmsgsj-Audio {
					position: relative;
					width: 100px;
					height: 20px;
					padding: 8px 0;
					border-radius: 10px;
					background-color: #F4F4F4;

					.chbatmsgsj-Audiofile {
						position: absolute;
						z-index: 10;
						width: 100px;
						height: 20px;
					}

					.chbatmsgsj-Audioicon {
						width: 20px;
						height: 20px;

						.chbatmsgsj-Audioiconimg {
							width: 20px;
							height: 20px;
						}
					}

					.chbatmsgsj-Audiotxt {
						font-size: 14px;
						color: #333333;
						line-height: 20px;
						margin-left: 5px;
					}
				}

				.recordmsgmainimg {
					position: relative;
					img {
						max-width: 100%;
					}
					// 收藏
					.emoVisible{
						position:fixed;
						z-index: 10;
						width:50px;
						border-radius:8px;
						.emoVisibleeach{
							width: 50px;
							text-align: center;
							line-height:24px;
							font-size:12px;
							color: #333;
							background-color: #fff;
						}
						.emoVisibleeach:hover{
							background-color:#E6E6E6;
						}
					}
				}
			}
		}
	}
	.videoclass{
		width: 450px;
		height: 400px;
	}
</style>